<template>
    <div class="editDataStrengthen">
            <div class="title">
                <span>请选择标注类型</span>
            </div>
            <div class="form">
                <el-form :model="markForm" ref="markForm" label-width="100px" >
                      <el-form-item label="数据类型" :required='true'>
                           <el-radio-group v-model="markForm.dataType">
                          <el-radio label="1">图像类</el-radio>
                           </el-radio-group>
                      </el-form-item>
                      <el-form-item label="标注类型" :required='true'>
                           <el-radio-group v-model="markForm.markType">
                          <el-radio label="1">图像分类</el-radio>
                          <el-radio label="2">物体检测<span class="note">(暂不支持自定义四边形标注模板)</span></el-radio>
                          <el-radio label="3">图像分割</el-radio>
                           </el-radio-group>
                      </el-form-item>
                </el-form>
            </div>
              <div class="title">
                <span>请选择数据集</span>
            </div>
            <div class="form">
                <span class="note">温馨提示:增强任务未结束前,该数据集会暂时锁定,期间无法对其进行导入导出操作,以及开启数据清洗、智能标注或多人标注任务</span>
                <el-form :model="collectionForm" ref="collectionForm" label-width="100px" style="margin-top:10px">
                      <el-form-item label="数据输入" prop="inputPhotoId" :required='true'>
                              <el-select v-model="collectionForm.inputPhotoId" placeholder="请选择数据集">
                               <el-option
                                 v-for="item in collectionSlect"
                                  :key="item.photoListId"
                                :label="item.name"
                               :value="item.photoListId">
                               </el-option>
                                </el-select>
                      </el-form-item>
                      <el-form-item label="数据输出" prop="outputPhotoId" :required='true'>
                           <el-select  v-model="collectionForm.outputPhotoId" placeholder="请选择数据集">
                               <el-option
                                 v-for="item in collectionSlect"
                                  :key="item.photoListId"
                                :label="item.name"
                               :value="item.photoListId">
                               </el-option>
                                </el-select>
                      </el-form-item>
                </el-form>
            </div>
                 <div class="title">
                <span>请选择增强算子</span>
            </div>
            <div class="form">
                  <div class="radio">
                      <el-checkbox  v-model="editImg.cropping">裁剪</el-checkbox >
                  </div>
                   <div class="radio" style="border-top:none;">
                  <el-checkbox  v-model="editImg.overturn">翻转</el-checkbox >
                   </div>
                    <div class="radio" style="border-top:none;">
                  <el-checkbox  v-model="editImg.rotate">镜像</el-checkbox >
                    </div>
            </div>
                 <div class="title" style="margin-top:20px">
                <span>请选择算子处理策略</span>
            </div>
            <div class="form">
                <el-form :model="operatorForm" ref="operatorForm" label-width="100px" >
                      <el-form-item label="处理策略" :required='true'>
                           <el-radio-group v-model="operatorForm.operator">
                          <el-radio label="1">串行叠加</el-radio>
                          <el-radio label="2">并行遍历</el-radio>
                           </el-radio-group>
                      </el-form-item>
                        <!-- <span class="note">当前账号下已有5张图片,预计该次任务会产生0张新图片,个人账号的图片数上限为200w张,请保证有足够的空间存放增强后的数据集</span> -->
                </el-form>
            </div>
            <div class="button">
                 <el-button @click="submit">提交</el-button>
                  <el-button @click="goBackStrengthen">返回</el-button>
            </div>
        </div>
</template>
<script lang="ts">
import {dataStrengthen} from '@/apis/dataStrengthen';
import {Collection} from "@/apis/collection/index"
import { RequestCode } from '@/server/base'
export default {
    name:'EditDataStrengthen',
    data(){
        return {
            markForm:{
                dataType:'1',
                markType:'1'
            },
            collectionForm:{
                inputPhotoId:'',
                outputPhotoId:'',
            },
            operatorForm:{
                 operator:'1'
            },

            editImg:{
              overturn:false,
              cropping:false,
              rotate:false
            } as any,
            collectionSlect:[] as any
        }
    },
    created(){
        this.imageCollection()
    },
    methods:{
          imageCollection(){
        this.collectionSlect=[]
          Collection.imageCollection('','').then((res:RequestCode)=>{
            res.data.forEach((item:any)=>{
              let obj :any={
                photoListId:item.image[0].photo.id,
                name:item.image[0].photo.name,
                type:item.image[0].photo.type
              }
              this.collectionSlect.push(obj)
            })
          })
        
      },
      submit(){
        let that :any=this
         let markForm:any=new Promise((resolve:any,reject:any)=>{
        that.$refs["markForm"].validate((valid:any)=>{
          if(valid){
            resolve();
          }
          else{
            return false;
          }
        });
      });
             let collectionForm:any=new Promise((resolve:any,reject:any)=>{
        that.$refs["collectionForm"].validate((valid:any)=>{
          if(valid){
            resolve();
          }
          else{
            return false;
          }
        });
      });
         let operatorForm:any=new Promise((resolve:any,reject:any)=>{
        that.$refs["operatorForm"].validate((valid:any)=>{
          if(valid){
            resolve();
          }
          else{
            return false;
          }
        });
      });
      Promise.all([markForm,collectionForm,operatorForm]).then(()=>{
        that.saveInfo()
      })
      },
      saveInfo(){
        let str:string=''
        for(let i in this.editImg){
          console.log(this.editImg[i])
          if(i=='cropping'&& this.editImg[i]){
              str+='3,'
          }else if(i=='overturn'&&this.editImg[i]){
             str+='1,'
          }else if(i=='rotate'&&this.editImg[i]){
             str+='2,'
          }
        }
        str = str.substring(0, str.length - 1);
        console.log(str,'000')
        let params={
          dataType:this.markForm.dataType,
          inputPhotoId:this.collectionForm.inputPhotoId,
          method:str,
          outputPhotoId:this.collectionForm.outputPhotoId,
          politic:this.operatorForm.operator,
          type:"1"
        }
        dataStrengthen.imageBoss(params).then((res:RequestCode)=>{
            (this as any).$message.success('创建成功')
            this.imageBossStart(res.data)
            this.$router.push('/dataStrengthen')
        })
      },
      imageBossStart(id:number|string){
        dataStrengthen.imageBossStart(id).then((res:RequestCode)=>{

        })
      },
      goBackStrengthen(){
          this.$router.push('/dataStrengthen')
      }
    }
}
</script>
<style lang="scss" scoped>
.note{
   color: #A5A5A5 ;
   font-size: 12px;
}
.radio{
    width: 100%;
    box-sizing: border-box;
      padding: 5px 20px;
    border: 1px solid #A5A5A5;
}
.button{
    width: 70%;
    box-sizing: border-box;
    padding-top: 20px;
    border-top: 1px solid #A5A5A5;
    margin-top: 30px;
}
.editDataStrengthen{
    box-sizing: border-box;
    padding: 20px 15px;
    background: #fff;
    width: 100%;
    .title{
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    }
</style>